/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Table, TableRow, TableBody, Cell, useTheme, InputLine, BlobInputList,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, RepLink, useInputControlSure, useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {TailMenRowIspCheck,} from "../contain/rarelyVary";
import {Link as RouterLink} from "../../routing/Link";
import {EditStorageContext} from "../StorageContext";
import {useUppyUpload} from "../hook/useUppyUpload";

interface DefectpicProps extends InternalItemProps {
    label: string;
    iAname?: string[];
    desc?: string;
    maxFile?: number;
}
export const itemA附图页=['附图说明','_FILE_S附图',];
/**附图 附页
 * */
export const Defectpic=
    React.forwardRef(({children, show, alone = true, refWidth, label, maxFile=5,desc,rep}: DefectpicProps, ref
) => {
        const {modified,setModified,} =React.useContext(EditStorageContext) as any;
        const [getInpFilter] = useMeasureInpFilter(null, itemA附图页, );
        const {inp, setInp,onSure} = useInputControlSure({ ref, });
        const onFinish = React.useCallback(async(upfile: any, del:boolean) => {
            onSure({...inp, '_FILE_S附图': upfile});
            !modified && setModified(true);
        }, [inp, modified,onSure,setModified]);
        const [uploadDom]=useUppyUpload({ repId:rep?.id!,
            maxFile, onFinish, storeObj: inp?._FILE_S附图
        });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}：</Text>
                <InputLine label={`${desc??'缺陷附图'}或说明：`}>
                    <BlobInputList value={inp?.附图说明 || ''} rows={2} datalist={[ ]}
                                   onListChange={v => setInp({...inp, 附图说明: v || undefined}) } />
                </InputLine>
                {desc??'缺陷附图'}：
                {uploadDom}
                {children}
            </InspectRecordLayout>
        );
});

interface DefectpicVwProps{
    orc: any;
    rep: any;
    children?: React.ReactNode;
    label?: string;
    unitno?:boolean;
    desc?: string;
    //检验 字样的？
    cap?: string;
}
/**附页允许 多个图片的！
 * 不一定要独占一页打印的。
 * */
export const DefectpicVw= ({ orc, rep, children,label='有机热载体锅炉外部检验报告（附页2）',unitno=true,
                               desc='缺陷附图', cap
    }: DefectpicVwProps
) => {
    const pageShow=orc?._FILE_S附图?.length>0 || orc.附图说明;
    const theme= useTheme();
    if(!pageShow) return <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Defectpic#Defectpic`}>
            <Text variant="h4" css={{"@media print": {display: 'none'}}}>{label}</Text>
        </RouterLink>;
    else return <>
        <div css={{"@media print": {paddingBottom: '10rem', pageBreakInside: 'avoid'}} }>
            <Text id='Defectpic' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>{label}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text>{unitno && <>单位内编号：{orc.单位内部编号}</>}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["62%","%"]  }   css={{borderCollapse: 'collapse', "@media print": {marginTop: '-10rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Defectpic'}>
                    <TableRow>
                        <Cell colSpan={2} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
                            <div css={{whiteSpace: 'pre-wrap'}}>
                                {desc}或说明：&nbsp;
                                {orc.附图说明 || '／'}
                            </div>

                            {!(orc?._FILE_S附图?.length > 0) && !orc.附图说明 &&
                                <Text css={{textAlign: 'center', display: 'block'}}>空的，进入上传吧</Text>}
                            {orc?._FILE_S附图?.map(({name, url}: any, i: number) => {
                                return <div key={i} css={{"@media print": {pageBreakInside: 'avoid'}}}>
                                    {i > 0 && <hr/>}
                                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                                        {url &&
                                            <img src={process.env.REACT_APP_OSS_ENDP + url} alt={url}
                                                 css={{
                                                     maxHeight: '14cm',
                                                     maxWidth: '-webkit-fill-available',
                                                     [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                                                     "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                                                 }}
                                            />
                                        }
                                    </div>
                                </div>
                            })}
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} cap={cap} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
        </TailMenRowIspCheck>
    </>;
};
